// Breadcrumbs.tsx
import React from 'react'
import './index.css' // 假设您的样式文件名为 Breadcrumbs.css
import { Breadcrumbs } from '~/store/features/fileSlice'
import { useStoreDispatch } from '~/store'

interface BreadcrumbsProps {
  breadcrumbs: Breadcrumbs[]
  cb?: (index: number) => void
}

const BreadcrumbsComponent: React.FC<BreadcrumbsProps> = ({
  breadcrumbs,
  cb
}) => {
  const isLast = (index: number) => index === breadcrumbs.length - 1
  const dispatch = useStoreDispatch()
  const goBack = (id?: number) => {
    if (breadcrumbs.length <= 1) return
    const index = id
      ? breadcrumbs.findIndex((crumb) => crumb.id === id) + 1
      : -1
    console.log('🚀 ~ goBack ~ id:', breadcrumbs.slice(0, index))
    cb && cb(index)
  }

  return (
    <div className='breadcrumbs ml-5 mb-5'>
      <span
        className='breadcrumb-item'
        style={{
          color: breadcrumbs.length > 1 ? '#6f62ea' : '#ccc',
          cursor: breadcrumbs.length > 1 ? 'pointer' : 'default'
        }}
        onClick={() => goBack()}
      >
        返回上一页 |
      </span>
      {breadcrumbs.map((crumb, index) => (
        <React.Fragment key={crumb.id}>
          <span
            className={
              isLast(index) ? 'text-primary font-bold' : 'breadcrumb-item'
            }
            onClick={() => !isLast(index) && goBack(crumb.id)}
          >
            {crumb.name}
          </span>
          {!isLast(index) && <span className='breadcrumb-separator'> / </span>}
        </React.Fragment>
      ))}
    </div>
  )
}

export default BreadcrumbsComponent
